<template>
  <div>
    <input type="text" v-model="text" v-maxlength="10" />
    <hr>
    <textarea v-model="test" v-maxlength="20"></textarea>
  </div>
</template>

<script>
export default {
  data() {
    return {
        text:'',
        test:""
    };
  },
  directives: {
    maxlength: {
      inserted(el, binding) {
        let warper = document.createElement("div");
        warper.className = "zx-div";
        el.parentNode.replaceChild(warper, el);
        let tip =document.createElement("span")
        tip.className="zx-tip"
        tip.innerHTML=`0/${binding.value}`
        warper.appendChild(el)
        warper.appendChild(tip)
        el.setAttribute("maxlength",binding.value)
      },
      update(el,binding){
          let tipSp=el.parentNode.querySelector('.zx-tip')
          tipSp.innerHTML=`${el.value.length}/${binding.value}`
        if(el.value.length==binding.value){
            el.style="color:red"
        }else{
            el.style=""
        }
     }
    },
  },
};
</script>

<style>
.zx-div {
    display: inline-block;
    position: relative;
}

.zx-tip {
    position: absolute;
    right: 3px;
    bottom: 3px;
    font-size: 12px;
}
</style>